<meta name="viewport" content="width=device-width" />

<style>
*{
  margin:0px;
  padding:0px;
}
.qiehuan{
  margin:10px;
  border:1px solid red;
  float:left;
  position:relative;
}
.subnav{
  box-sizing:border-box;
  position:absolute;
  bottom:10px;
  width:100px;
  left:50%;
  margin-left:-50px;
}
.subnav span{
  display:block;
  width:10px;
  height:10px;
  background:#aaa;
  float:left;
  text-align:center;
  border-radius:50%; 
  margin-right:10px;
}
.subnav .subnavhover{
  background:#333;
}
.leftnav,.rightnav{
  display:none;
  width:42px;
  height:69px;
  background:url(index_btn01.png);
  position:absolute;
  top:100px;
}
.rightnav{
  right:5px;
  background:url(index_btn02.png);
}
.leftnav{
  left:5px;
}
</style>
<div class="qiehuan" id="qiehuan">
  <img id="p" src="1.jpg" width="100%" />

  <div class="leftnav" id="leftnav"></div>
  <div class="rightnav" id="rightnav"></div>
  <div class="subnav">
<span 

class="subnavhover"></span><span></span><span></span><span

></span><span></span>
  </div>
</div>

<script>
setInterval(f,5000);

function f(){
  rightnav.onclick();
}

//qiehuan.addEventListener("touchstart",qover);
//qiehuan.addEventListener("touchend",qout);

qiehuan.onmouseover = qover;

function qover(){
  rightnav.style.display = "block";
  leftnav.style.display = "block";
};

qiehuan.onmouseout = qout;

function qout(){
  rightnav.style.display = "none";
  leftnav.style.display = "none";
};

var i = 1;

var spans = qiehuan.getElementsByTagName("span");

function changeDotColor(){
  for(var j=0;j<spans.length;j++){
    spans[j].className = "";
  }
  spans[i-1].className = "subnavhover";
}

rightnav.onclick = function(){
  if(i==5) i = 0;
  p.src = ++i+".jpg";
  changeDotColor();
};

leftnav.onclick = function(){
  if(i==1) i = 6;
  p.src = --i+".jpg";
  changeDotColor();
};
</script>


























